<template>
    <div class="cesiumContainer" id="cesiumContainer" ref="viewer">
    </div>
</template>

<script>
    import {
        Viewer,
        UrlTemplateImageryProvider,
        Cartesian3,
        Math,
        ScreenSpaceEventType,
        createWorldTerrain,
        Ion,
        ProviderViewModel,
        buildModuleUrl
    } from 'cesium';

    import {mapConfig} from '/src/config/mapConfig'
    import {store} from "../../store";

    export default {
        name: "smViewer",
        mounted() {
            this.init()
        },
        methods: {
            async init() {
                Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjY2RjM2E1Mi1iOTcxLTQxYjgtYWJhNC1mODdiNjQxNWViYTIiLCJpZCI6ODA3NjUsImlhdCI6MTY0MzE2MDU4MX0.RMy68gBKAB6FHhh6iOf51BSugMnSPYf0n8ZQsI7ZjzM';

                // cesium 初始化
                let viewer = new Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: true,
                    fullscreenButton: false,
                    infoBox: false,
                    geocoder: false,
                    timeline: false,
                    navigationHelpButton: false,
                    navigationInstructionsInitiallyVisible: false,

                });
                //去除版权信息
                viewer._cesiumWidget._creditContainer.style.display = "none";
                // 抗锯齿
                viewer.scene.postProcessStages.fxaa.enabled = false;
                // 水雾特效
                viewer.scene.globe.showGroundAtmosphere = true;
                // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
                viewer.scene.screenSpaceCameraController.constrainedPitch = Math.toRadians(-20);
                // 取消默认的双击事件
                viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK);


                //自定义影像图层
                var imageProviderVMs = [];
                //1.Cesium加载高德矢量地图
                var gaodeLayer = new UrlTemplateImageryProvider({
                    url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
                    minimumLevel: 4,
                    maximumLevel: 18
                })
                var gaodeLayerVM = new ProviderViewModel({
                    name: "高德矢量",
                    iconUrl: buildModuleUrl(
                        "Widgets/Images/ImageryProviders/openStreetMap.png"
                    ),
                    tooltip: "高德矢量 地图服务",
                    creationFunction: function () {
                        return gaodeLayer;
                    },
                });
                imageProviderVMs.push(gaodeLayerVM);
                //2.Cesium加载高德影像
                var gaodeImgLayer = new UrlTemplateImageryProvider({
                    url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                    minimumLevel: 3,
                    maximumLevel: 18
                })
                var gaodeImgLayerVM = new ProviderViewModel({
                    name: "高德影像",
                    iconUrl: buildModuleUrl(
                        "Widgets/Images/ImageryProviders/bingAerial.png"
                    ),
                    tooltip: "高德影像 地图服务",
                    creationFunction: function () {
                        return gaodeImgLayer;
                    },
                });
                imageProviderVMs.push(gaodeImgLayerVM);
                //3.Cesium加载注记要素
                var gaodeAnnLayer = new UrlTemplateImageryProvider({
                    url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
                    minimumLevel: 3,
                    maximumLevel: 18
                })
                var gaodeAnnLayerVM = new ProviderViewModel({
                    name: "高德注记",
                    iconUrl: buildModuleUrl(
                        "Widgets/Images/ImageryProviders/bingRoads.png"
                    ),
                    tooltip: "高德注记要素 地图服务",
                    creationFunction: function () {
                        return gaodeAnnLayer;
                    },
                });
                imageProviderVMs.push(gaodeAnnLayerVM);
                viewer.baseLayerPicker.viewModel.imageryProviderViewModels = imageProviderVMs;
                // 自定义地形图层
                var terrainProviderVMs = [];
                var terrainProvider = createWorldTerrain({
                    requestWaterMask: true, // required for water effects
                    requestVertexNormals: true // required for terrain lighting
                });
                var terrainProviderVM = new ProviderViewModel({
                    name: "全球地形",
                    iconUrl: buildModuleUrl(
                        "Widgets/Images/TerrainProviders/CesiumWorldTerrain.png"
                    ),
                    tooltip: "全球地形服务",
                    creationFunction: function () {
                        return terrainProvider;
                    },
                });
                terrainProviderVMs.push(terrainProviderVM);
                viewer.baseLayerPicker.viewModel.terrainProviderViewModels = terrainProviderVMs;

                // 将三维球定位到指定位置
                const mapRange = store.getters.mapRange
                if (mapRange && Object.keys(mapRange).length > 0) {
                    viewer.camera.flyTo({
                        destination: Cartesian3.fromDegrees(mapRange.longitude, mapRange.latitude, mapRange.height),
                        orientation: {
                            heading: Math.toRadians(mapRange.heading),
                            pitch: Math.toRadians(mapRange.pitch),
                            roll: Math.toRadians(mapRange.roll)
                        },
                        complete: function callback() {
                            // 定位完成之后的回调函数
                        }
                    });
                } else {
                    viewer.camera.flyTo({
                        destination: Cartesian3.fromDegrees(mapConfig.initLng, mapConfig.initLat, mapConfig.initHeight),
                        orientation: {
                            heading: Math.toRadians(mapConfig.initHeading),
                            pitch: Math.toRadians(mapConfig.initPitch),
                            roll: Math.toRadians(mapConfig.initRoll)
                        },
                        complete: function callback() {
                            // 定位完成之后的回调函数
                        }
                    });
                }

                // 点击home定位到初始化的位置
                viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
                    e.cancel = true;
                    //你要飞的位置
                    viewer.camera.flyTo({
                        destination: Cartesian3.fromDegrees(mapConfig.initLng, mapConfig.initLat, mapConfig.initHeight),
                        orientation: {
                            heading: Math.toRadians(mapConfig.initHeading),
                            pitch: Math.toRadians(mapConfig.initPitch),
                            roll: Math.toRadians(mapConfig.initRoll)
                        },
                        complete: function callback() {
                            // 定位完成之后的回调函数
                        }
                    });
                });

                ////去掉二三维切换动画效果  设置这个参数，二三维切换的时候位置就会保持原来的了
                viewer.sceneModePicker.viewModel.duration = 0

                window.viewer = viewer
                this.$store.commit('SET_CESIUM_VIEWER_STATUS', true)
            }
        }
    }
</script>

<style lang="scss">
    @import "/src/style/layout.scss";

    .cesiumContainer {
        position: relative;
        height: calc(100vh - $headerHeight - 20px);
    }

    .cesium-viewer-fullscreenContainer {
        top: 8px;
        right: 130px;
    }
</style>
